<template>
  <div class="g-menu-item">
    <div class="g-menu-item-label">
      <span>{{ data.name }}</span>
    </div>
    <ul class="g-submenu" v-if="data.submenu && data.submenu.length > 0 ">
      <li class="g-submenu-item" 
          v-for="(item, idx) in data.submenu" 
          :key="idx" 
          :class="{ 'selected': selected === item.key, 'reg-data-nav':item.name=='注册资源'}">
        <template v-if="item.key&&(item.name!='注册资源'||item.name=='注册资源'&&userInfo&&userInfo.role=='admin')">
          <div class="submenu-item-active" v-show="selected === item.key"></div>
          <div class="submenu-item-label" 
              @click="select(item.key, item.name, item.link, $event)">
            <div class="submenu-item-icon">
              <i v-if="selected === item.key" class="icon-active iconfont" :class="'icon-' + (item.activeIcon || item.icon)"></i>
              <i v-else class="iconfont" :class="'icon-' + item.icon"></i>
            </div>
            <div class="submenu-item-name">
              {{ item.name }}
            </div>
            <div v-if="data.name != '资源注册'&&data.name != '数据加工'" class="submenu-item-count">
              {{ item.count }}
            </div>
          </div>
        </template>
        <ul class="third-submenu" v-if="childDisplay == '群组资源' && item.name === '群组资源'">
          <li :class="{'active' :(activedChild == child.groupId)}" v-for="child in groupDataChilds" :key="child.groupId"
            @click="handleThirdSubmenuClick(child)">
            <span :title="child.groupName">{{child.groupName}}</span>
            <span class="submenu-item-leaf-count">{{child.count}}</span>
          </li>
        </ul>
        <ul class="third-submenu" v-if="childDisplay == '部门资源' && item.name === '部门资源'">
          <li :class="{'active':(activedChild == child.id)}" v-for="child in deptDataChilds" :key="child.key" 
            @click="handleThirdSubmenuClick2(child)">
            <span :title="child.label">{{child.label}}</span>
            <span class="submenu-item-leaf-count">{{child.count}}</span>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
  import Bus from '@/utils/event_bus'
import { setTimeout } from 'timers';

  export default {
    name: 'g-menu-item',
    components: {

    },
    props: {
      data: {
        type: Object
      },
      selected: {},
      deptDataChilds: {
        type: Array,
      },
      groupDataChilds: {
        type: Array,
      },

    },
    data() {
      let componentConf = this.$root && this.$root.componentConf ? this.$root.componentConf : null;
      return {
        open: true,
        componentConf: componentConf,
        activedChild: null,
        //控制子节点显示
        switchDisplay: {
          '群组资源': false,
          '部门资源': false,
        },
        childDisplay: null
      }
    },
    mounted(){
      // setTimeout(()=>{
      //   console.log(this.groupDataChilds);
      // },1000);
      
      
    },
    computed:{
      userInfo(){
        return this.$store.state.userInfo;
      }
    },
    methods: {
      onClick() {
        if (this.data.submenu && this.data.submenu.length > 0) {
          this.open = !this.open;
        }

        if (this.data.key !== undefined) {
          this.select(this.data.key);
        }
      },
      async select(key, name, link = false, event) {
        this.activedChild = null;
        this.childDisplay = name;
 
        if (link) {
          window.open(link, '_blank');
          return;
        }
        // console.log(this.data);
        // console.log(key);
        this.$emit('on-select', key);
        Bus.$emit('on-submenu-change', name);
      },
      handleThirdSubmenuClick(event) { 
        this.$emit('on-select', 'group-data');  
        Bus.$emit('change-group-id', event.groupId);
        this.activedChild = event.groupId;
      },
      handleThirdSubmenuClick2(event) {
        this.$emit('on-select', 'dept-data');  
        Bus.$emit('change-dept-id', event.id);
        this.activedChild = event.id;
      }
    }
  }

</script>

<style lang="scss">
  @import 'common';

  .scroll-bar {

    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    margin-right: -15px;
    position: relative;

    .menu-container {

      border-right: 1px solid #ccc;
      min-height: 100%;
      padding-bottom: 12px;
      width: 180px;


    }
  }

  .g-menu-item {
    width: 180px;
    padding-bottom: 10px;

    .g-menu-item-label {
      display: block;
      width: 100%;
      height: 44px;
      line-height: 44px;
      color: $lightGray;
      position: relative;
      cursor: pointer;
      transition: color .3s;
      padding-left: 20px;


      >span {
        font-size: $fontSizeSmall;
        color: $lightGray;
        transition: color .3s;
      }
    }

    .g-submenu {
      width: 100%;
      max-height: 600px;
      overflow: hidden;
      transition: all .15s;

      .g-submenu-item {
        width: 100%;
        background-color: transparent;
        transition: all .3s;
        border-top: 1px solid rgba(0, 0, 0, 0);
        border-bottom: 1px solid rgba(0, 0, 0, 0);
        border-right: 1px solid transparent;
        position: relative;

        .submenu-item-active {
          width: 3px;
          position: absolute;
          left: 0;
          top: -1px;
          height: 46px;
          //   background-color: $info;
          z-index: 10;
        }

        .submenu-item-label {

          display: block;
          width: 100%;
          height: 44px;
          line-height: 44px;
          position: relative;
          border-left: 3px solid transparent;
          cursor: pointer;
          transition: all .3s;

          .submenu-item-icon {
            height: 100%;
            text-align: center;
            position: absolute;
            left: 16px;
            top: 0;

            >i {
              color: $lightGray;
              font-size: 16px;
              line-height: 42px;
            }

            .icon-active {
              color: $deepGray;
            }

          }

          .submenu-item-name {
            padding: 0 46px 0 40px;
            font-size: $fontSizeBase;
            color: $deepGray;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .submenu-item-count {
            padding-right: 12px;
            position: absolute;
            right: 0;
            top: 0;
            font-size: 14px;
            color: $lightGray;
          }

        }

        &.selected {
          padding-right: 0 !important;
          border-top: 1px solid #ccc;
          border-bottom: 1px solid #ccc;
          border-right: 1px solid #fff !important;

          .submenu-item-label {
            // border-left: 3px solid $info;
            background-color: #fff !important;

            .submenu-item-name {
              color: $deepGray;
              font-weight: 500;
            }
          }
        }

        &:hover {
          border-right: 1px solid #ccc;

          .submenu-item-label {
            background-color: #f6f6f6;
          }

        }

      }
    }
  }

  .third-submenu {
    // padding: 5px 0 0 26px;
    padding: 0 0 0 26px;
  }

  .third-submenu li {
    margin-bottom: 16px;
    padding-left: 13px;
    border-left: 2px solid #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 28px;
    position: relative;
  }

  .third-submenu li.active {
    border-left: 2px solid #5089FF;
  }

  .third-submenu li:hover {
    cursor: pointer;
  }
  .submenu-item-leaf-count{
    position: absolute;
    right: 13px;
    top: 1px;
    color: #a6aeb2;
    font-size: 14px;
  }
</style>
